<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="jQuery.min.js"></script>
    <script src="mock.js"></script>
    <link rel="stylesheet" href="bootstrap.min.css" />
    <!-- tip工具 -->
    <script src="tip.js"></script>

    <style>
        #form {
            height: 400px;
            width: 380px;
            top: 32%;
            left: 60%;
            position: absolute;
            border-radius: 0.3em;
            background: hsla(0, 0%, 100%, 0.25) border-box;
            padding: 10px;
            box-shadow: 0 0 1px hsla(0, 0%, 100%, 0.25) inset,
                0 0.5em 1em rgba(0, 0, 0, 0.6);
        }

        html {
            background-image: url("image.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            width: 100%;
            height: 100%;
        }

        h2 {
            position: absolute;
            left: 68%;
            top: 20%;
            height: 30px;
        }

        input {
            margin-right: 30px;
            margin-top: 15px;
        }

        #regiser {
            padding-top: 20px;
        }

        label {
            position: absolute;
            top: 14px;
        }

        #tip {
            position: absolute;
            min-width: 200px;
            text-align: center;
            top: 80px;
            left: 60%;
            display: none;
            z-index: 9999;
        }

        .right_tip{
            min-height: 30px;
            min-width: 100px;
            position: absolute;
            text-align: center;
            z-index: 9999;
            display: none;
            font-size: 12px;
            padding: 0;
            line-height: 28px;
        }
    </style>
</head>

<body>
    <h2>用户注册</h2>
    <strong id="tip" role="alert"></strong>
    <div id="username_tip" class="alert alert-danger right_tip"></div>
    <div id="password_tip" class="alert alert-danger right_tip"></div>
    <div id="check_tip" class="alert alert-danger right_tip"></div>
    <div id="mail_tip" class="alert alert-danger right_tip"></div>
    <div id="phone_tip" class="alert alert-danger right_tip"></div>
    <div id="form">

        <form class="form-horizontal" id="register">
            <div class="form-group">
                <label class="col-sm-3 control-label">用&nbsp;户&nbsp;名&nbsp;</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" name="password" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">确认密码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="check" placeholder="请输入密码" name="username" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
                <div class="col-sm-9">
                    <input type="mail" class="form-control" id="mail" placeholder="请输入用户名" name="mail" />
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">手&nbsp;机&nbsp;号&nbsp;</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="phone" placeholder="请输入手机号" name="phone" />
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <button type="button" class="btn btn-success">注册</button>
                </div>
            </div>
        </form>
    </div>

    <script>
        $(function () {
            initMock();
            // originAjax();
            // jQueryAjax();
            // showMsg('测试tip');
            
            $('#username').blur(function(e){
                var $username_input = $(e.target);
                if($username_input.val() === ''){
                    showRightTip('username', '用户名不能为空!');
                }else{
                    $.ajax({
                        url: 'http://mocktest/check_username',
                        type: 'post',
                        dataType: 'json',
                        success: function(res){
                            var data = res.data;
                            if(data.code == 200){
                                showSuccess(data.msg);
                                cancelTip('username');
                            }else{
                                showRightTip('username', data.msg);
                            }
                        }
                    })
                }
            });

            $('#password').blur(function(e){
                var $password_input = $(e.target);
                if($password_input.val() === ''){
                    showRightTip('password', '密码不能为空！');
                }else{
                    cancelTip('password');   
                }
            });

            $('#check').blur(function(e){
                var $check_input = $(e.target);
                if($check_input.val() === ''){
                    showRightTip('check', '确认密码不能为空!');
                }else if($('#password').val() !== $check_input.val()){
                    showRightTip('check', '两次密码不一致!');
                }else{
                    cancelTip('check');
                }
            });

            $('#mail').blur(function(e){
                var $mail_input = $(e.target);
                if($mail_input.val() === ''){
                    showRightTip('mail', '邮箱不能为空!');
                }else{
                    cancelTip('mail');
                }
            });

            $('#phone').blur(function(e){
                var $phone_input = $(e.target);
                if($phone_input.val() === ''){
                    showRightTip('phone', '手机号不能为空!');
                }else{
                    cancelTip('phone');
                }
            })
        });



        function initMock() {
            Mock.mock("http://mocktest", "get", {
                'data': {
                    'code': 200,
                    'msg': "请求成功",
                },
            });
            Mock.mock("http://mocktest/check_username", "post", {
                'data|1': [
                    {
                        'code': 200,
                        'msg': "用户名可用",
                    },{
                        'code': 301,
                        'msg': '用户名已被使用'
                    }
                ] 
            });
        }


        function originAjax() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    var data = xhr.responseText;
                    console.log(data);
                }
            };
            xhr.open("get", "http://mocktest");
            xhr.send();
        }

        function jQueryAjax() {
            $.ajax({
                url: "http://mocktest",
                type: "get",
                dataType: "json",
                success: function (res) {
                    console.log(res);
                },
            });
        }
    </script>
</body>

</html>